<template>
    <div>
        <div class="flex align-center jus-between">
            <div class="flex align-center">
                <div @click="toPath('/user-homepage?role=other&user_id='+item.idol_info.id)" class="cursor-pointer">
                    <el-avatar :size="50" :src="item.idol_info.avatar"></el-avatar>
                </div>

                <div class="ml-10 idol-info-status">
                    <div class="flex align-center">
                        <div class="pr-6">{{item.idol_info.name}}</div>
                        <div class="font-13">
                            <div v-if="item.idol_info.online==1">在线</div>
                            <div v-else-if="item.idol_info.online==2">密聊中</div>
                            <div v-else-if="item.idol_info.online==3">直播中</div>
                            <div v-else>离线</div>
                        </div>
                    </div>
                    <div class="flex align-center font-13">
                        <div>
                            <span>ID</span>
                            <span class="pl-4">{{item.idol_info.id}}</span>
                        </div>
                        <div class="ml-14">
                            <span>粉丝</span>
                            <span class="pl-4">{{item.idol_info.fans_count}}</span>
                        </div>
                        <div class="ml-14">
                            <span>作品</span>
                            <span class="pl-4">{{item.idol_info.creation_count}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div @click="cancelAttention" class="pd-12 pt-8 pb-8 radius-10 color-fff cursor-pointer" style="background:#272337;" v-show="attention">已关注</div>
                <div @click="toAttention" class="pd-12 pt-8 pb-8 radius-10 color-fff cursor-pointer" style="background:#FF1C6D;" v-show="!attention">关注</div>
            </div>
        </div>
        <div class="mt-15" v-if="data.length>0">
            <el-row :gutter="20">
                <el-col :key="key" :span="8" v-for="(value,key) in data">
                    <div @click="toPath('/user-homepage?role=other&activeName=1&user_id='+item.idol_info.id)" class="position-relative cursor-pointer" style="height:22vh">
                        <el-image :src="value.first_frame" fit="cover" style="width: 100%; height: 22vh;border-radius:10px"></el-image>
                        <div class="creation-statis font-12">
                            <div class="flex align-center" style="padding:5%">
                                <div class="flex align-center">
                                    <el-image :src="require('@/assets/icon/video/viewed.png')" fit="cover" style="width: 16px;height:16px;"></el-image>
                                    <span class="pl-5" style="color:#EFEFEF">{{value.viewed}}</span>
                                </div>
                                <div class="ml-12 flex align-center">
                                    <el-image :src="require('@/assets/icon/video/comment.png')" fit="cover" style="width: 16px;height:16px;"></el-image>
                                    <span class="pl-5" style="color:#EFEFEF">{{value.comment_count}}</span>
                                </div>
                                <div class="ml-12 flex align-center">
                                    <el-image :src="require('@/assets/icon/video/like-grey-light.png')" fit="cover" style="width: 16px;height:16px;"></el-image>
                                    <span class="pl-5" style="color:#EFEFEF">{{value.like_count}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="mt-15" v-else>
            <div style="width:100%;height:calc(22vh);font-size:16px;color:#fff;text-align:center;">
                <el-image :src="require('@/assets/image/empty-video.png')" fit="cover" style="width: 16vh; height: 16vh;border-radius:10px"></el-image>
                <div class="color-999 font-14">TA还没有作品</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        item: {
            type: Object,
            default: () => {
                return {}
            },
        },
    },
    data() {
        return {
            data: [],
            attention: 1,
        }
    },
    mounted() {
        this.getCreation()
    },
    methods: {
        getCreation() {
            this.$request.get('/creation/index', { user_id: this.item.idol_info.id, creation_type: 'short', size: 3 }).then((res) => {
                this.data = res.items
            })
        },
        toPath(path) {
            if(Object.keys(this.$store.state.user.user ).length){
                window.open(path, '_blank');
            }else{
                this.$store.dispatch('system/showLogin')
            }
          //  this.$router.push({ path: path })
        },
        cancelAttention() {
            this.$request.del('/user-attention/cancel/' + this.item.idol_info.id).then((res) => {
                this.attention = 0
            })
        },
        toAttention() {
            this.$request.post('/user-attention/create/' + this.item.idol_info.id).then((res) => {
                this.attention = 1
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.idol-info {
    &-status {
        display: flex;
        flex-direction: column;
        /* flex: 1; */
        height: 50px;
        justify-content: space-around;
    }
}
.creation-statis {
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 100%;
    background: url('@/assets/attention/icon-bg.png');
}
</style>